<template>
  <view class="container" v-if="isLoaded">
    <!-- 表单 -->
    <view class="content" style="padding: 30rpx 30rpx 60rpx">
      <form class="l-form">
        <view class="l-form-item">
          <view class="l-lbl">区域名称:</view>
          <view class="l-form-right l-form-input">
            <input class="l-input" v-model="form.name" />
          </view>
        </view>
        <view class="l-form-item">
          <view class="l-lbl">区域编码:</view>
          <view class="l-form-right l-form-input">
            <input class="l-input" v-model="form.number" />
          </view>
        </view>
        <view class="l-form-item">
          <view class="l-lbl">排序:</view>
          <view class="l-form-right l-form-input">
            <input class="l-input" v-model="form.sort" />
          </view>
        </view>
      </form>
    </view>
    <li-bottom-btns :zIndex="10" :mode="mode" v-on:btnDelClick="btnDelClick" v-on:btnEditOrSaveSubmitClick="btnEditOrSaveSubmitClick" />
  </view>
</template>
<script>
import { GetFoodDeskCategoryById, DelFoodDeskCategory, EditFoodDeskCategory, AddFoodDeskCategory } from '../../../common/api.js';
import { uShowLoading, uHideLoading, uNavigateTo, umodal, utoast, uSetNavigationBarTitle } from '../../../utils/uniUtils.js';
import checker from '../../../common/graceChecker';
import { transfer, transferTypeEnum } from '../../../common/dataTransfer.js';
import { modeEnum } from '../../../constants/normalConstants.js';
import { toastIconEnum } from '../../../constants/uiConstants.js';
import { corpId, storeId } from '../../../constants/apiConstants';
export default {
  async onLoad(options) {
    this.mode = options.mode == 'edit' ? 'edit' : 'add';
    uSetNavigationBarTitle((options.mode == 'edit' ? '编辑' : '新增') + this.subject);

    if (this.mode == modeEnum.edit) {
      this.id = options.id;
    }
  },

  async mounted() {
    try {
      uShowLoading();
      // 编辑模式
      if (this.mode == modeEnum.edit) {
        await this.getData();
      } else {
        // 新增模式
        this.form = {
          corpId,
          storeId,
          number: '',
          name: '',
          sort: null
        };
      }
      this.getOtherData();
    } catch (error) {
      console.log('error', error);
    } finally {
      this.isLoaded = true;
      uHideLoading();
    }
  },
  data() {
    return {
      modeEnum,
      subject: '桌台区域', // 主题
      rootRoute: 'workbench',
      routeName: 'tableArea',
      mode: 'add', // 模式
      isLoaded: false,
      id: null,
      form: null,
      // 数据转换器
      transferRules: [
        {
          name: 'sort',
          type: transferTypeEnum.intOrNull
        },
        {
          name: 'name',
          type: transferTypeEnum.trim
        }
      ],
      //表单校验规则
      rules: [
        {
          name: 'name',
          checkType: 'endNotNull',
          errorMsg: '桌号名称不能为空~~'
        }
      ],
      lock: false // 节流锁
    };
  },

  methods: {
    async getData() {
      console.log('id', this.id);

      const res = await GetFoodDeskCategoryById(this.id);
      this.form = res.data;
    },
    getOtherData() {
      // ,,,
    },

    async insertData() {
      return AddFoodDeskCategory(this.form);
    },

    async delData() {
      return await DelFoodDeskCategory(this.id);
    },

    async editData() {
      return await EditFoodDeskCategory(this.form);
    },

    async btnDelClick() {
      const res = await umodal();
      // 确定删除
      if (res) {
        const result = await this.delData();
        console.log(result);
        if (result.code != null && result.code == 0) {
          await utoast('删除成功！', toastIconEnum.success);
          this.disabled = true;
          setTimeout(() => {
            uNavigateTo(`/pages/${this.rootRoute}/${this.routeName}/list`);
          }, 1000);
        } else {
          await utoast('删除失败！', toastIconEnum.error);
        }
      }
    },

    async btnEditOrSaveSubmitClick() {
      if (this.lock) {
        return;
      }
      if (!(await umodal('确认要提交吗？'))) {
        return;
      }
      // 数据转换
      this.form = transfer(this.form, this.transferRules);

      // 表单校验
      const isOk = checker.check(this.form, this.rules);
      if (!isOk) {
        await utoast(checker.error, toastIconEnum.none);
        return;
      }

      //  提交表单
      const res = this.mode == modeEnum.edit ? await this.editData(this.form) : await this.insertData(this.form);
      if (res?.code == 0) {
        await utoast('操作成功');
        setTimeout(() => {
          uNavigateTo(`/pages/${this.rootRoute}/${this.routeName}/list`);
        }, 1000);
      } else {
        setTimeout(() => {
          this.lock = false;
          console.log('fail', this.lock);
        }, 2000);
      }
    }

    //方法放上面
  }
};
</script>
<style lang="scss" scoped>
@import '~@/static/styles/commonStyle.scss';
.content {
  background-color: #fff;
  padding: 0 30rpx;
}
</style>
